<template>
  <div class="search">
      <van-search
        shape="round"
        background="#FFCC33"
        placeholder="请输入商家或商品名称"
        class="search"
        autofocus
        @input="handleSearch"
      />
      <h2 class="title">热门搜索</h2>
      <ul class="hotSearch">
          <li v-for="hot in hotList" :key="hot.id">{{hot.title}}</li>
      </ul>
      <ul class="searchContent">
          <!-- <h1 v-if="!searchList.length">无匹配内容</h1> -->
          <div class="searchItem" v-for="search in searchList" :key="search.id">
              <p v-for="inner in search.sub_categories" :key="inner.id">{{inner.name}}</p>
          </div>
      </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'search',
  data () {
    return {
      hotList: [],
      searchList: [],
    }
  },
  created () {
    axios({
      url: 'https://elm.cangdu.org/v2/index_entry',
      method: 'GET',
    }).then(data => {
      this.hotList = data.data
    })
  },
  methods: {
    handleSearch (value) {
      axios({
        url: 'https://elm.cangdu.org/shopping/v2/restaurant/category',
        method: 'GET',
      }).then(data => {
        this.searchList = data.data.filter(item => item.name.indexOf(value) !== -1)
      })
    },
  },
}
</script>

<style lang='less'>
.search{
    width:100%;
    .title{
        margin: 20px 0;
        font-size: 18px;
        padding-left: 15px;
        font-weight: bold;
    }
    .hotSearch{
        padding: 0 30px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        li{
            font-size: 14px;
            color: #5E5F60;
            width: fit-content;
            line-height: 52px;
            height: 52px;
            background: #F5F5F6;
            border-radius: 30px;
            padding: 4px 15px;
        }
    }
    .searchContent{
      h1{
        margin: 20px;
        text-align: center;
        font-size: 40px;
      }
      .searchItem{
        color: #FFCC33;
        p{
          padding: 10px 40px;
          margin: 5px 0;
          background: #F5F5F6;
          font-size: 15px;
          &:nth-of-type(1){
            padding:20px 0;
            font-size: 20px;
          }
        }
      }
    }
}
</style>
